<!DOCTYPE html>
<html>
<head>
	<title><%= title%></title>
  	<meta charset="utf-8"/>
  	<link rel="stylesheet" href="/stylesheets/style.css"/>
  	<link rel="shortcut icon" href="http://img4.dangdang.com/bottom/validate.gif"/>  
</head>
<body>
	<%include nav%>
	<div id="index">
		<div class="content">
			<div class="show clearfix">
				<div class="plan">
					<p class="join">加入阅读作者计划</p>
					<p class="help">帮你成就作家梦想</p>
					<p class="result1">1881 人申请加入</p>
					<p class="result2">37 家出版社入驻</p>
					<span class="apply-btn"></span>
				</div>
				<div class="slide-content clearfix" onselectstart="return false">
					<div class="slide-content-copy clearfix">
						<div class="left-prev">
							<div class="prev">
								<img src="./img/arrow-prev.gif"/>
							</div>
						</div>
						<div class="right-next">
							<div class="next">
								<img src="./img/arrow-next.gif"/>
							</div>
						</div>
					</div>
					<div class="img show">
		                <img src="./img/slide1.jpg" alt="">
		                <p class="img-text">dfgdsfgdf</p>
		            </div>
		            <div class="img hide">
		                <img src="./img/slide2.jpg" alt="">
		            </div>
		            <div class="img hide">
		                <img src="./img/slide3.jpg" alt="">
		            </div>
		            <div class="img hide">
		                <img src="./img/slide4.jpg" alt="">
		            </div>
		            <div class="img hide">
		                <img src="./img/slide5.jpg" alt="">
		            </div>
				</div>
			</div>
		</div>
		<div class="free">
			<h3>最新免费</h3>
			<ul class="bookslist clearfix">
				<% for(var i=0; i < bookname.length; i++) { %>
				<li class="book">
					<div class="float-name">
						<p class="float-book-name"><%= bookname[i] %></p>
						<a href="javascript:;" class="gogo">去看看</a>
					</div>
					<img class="book-img" src="<%= imgurl[i]%>" alt="">
					<p class="book-name"><%= bookname[i] %></p>
					<p class="free-info">
						<span class="time-free">限时免费 </span>
						<span class="book-prize"><%= prize[i] %></span>
					</p>
				</li>
				<% } %>
			</ul>
		</div>
		<% include footer %>
	</div>
	<div class="mask hide">
		<div class="mask-info">
			请先登录！
		</div>
	</div>
	<script src="/js/require.js"></script>
    <script>
        require.config({
            paths: {
                'jquery': '/js/jquery-2.1.3.min',
                'slide':'/js/slide',
                'logined':'/js/logined'
            }
        });

        require(['slide','jquery','logined'], function(Slide,$,Logined) {
		    //头部登陆头像显示的处理
            var username = localStorage.getItem("username"),
                userpass = localStorage.getItem("userpass");
		    Logined.logined(username,userpass);

		    //调用幻灯片
		    Slide.slide();
		    
		    //设计mask的高度为当前页面的高度;
		    var h = $(document).height();
		    $(".mask").css("height",h);

		    //选择书籍阅读（放到动态获取书籍信息的后面）
		    $(".bookslist .book").on("mouseover",function(){
		        var self = $(this);
		        var bookname = $(this).find(".book-name").html();
		        var bookimg = $(this).find(".book-img").attr("src");
		        //未登录的不可以阅读
		        if($(".unlogin").hasClass("hide")){//已登录的用户
		        	//缓存要浏览的图书信息
                    localStorage.setItem("bookname",bookname);
                    localStorage.setItem("bookimg",bookimg);
                    self.find(".gogo").attr("href","/readbook");
		        }else{
		            self.click(function(e){
		                var target = $(e.target);
		                if(target.hasClass("gogo")){
		                    $(".mask").fadeIn(500)
		                    setTimeout(function(){
		                        $(".mask").fadeOut(500);
		                    },1500)
		                }
		            })  
		        } 
		    })
		});
	</script>
</body>
</html>